<template>
      <div class="app-body">
            <!-- 条件查询 -->
            <el-col :span="24" class="info-search-box">
                  <div class="search">
                        <div class="search-item">
                              商品ID :
                              <el-input
                                    size="mini"
                                    v-model="search.goodsId"
                                    placeholder="通过商品ID查询"
                                    clearable
                              ></el-input>
                        </div>
                        <div class="search-item">
                              <el-button size="mini" type="primary" @click="toPage">查询</el-button>
                        </div>
                  </div>
            </el-col>
            <el-col :span="24" class="button-box">
                  
                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="delList"
                        >批量删除</el-button
                  >
                  <el-button size="mini" type="warning" icon="el-icon-coin" @click="add"
                        >结算</el-button
                  >
            </el-col>
            <el-table
                  @selection-change="handleSelectionChange"
                  size="mini"
                  v-loading="loading"
                  :header-cell-style="$setting.table_header"
                  :stripe="true"
                  :fit="true"
                  :data="tableData"
                  style="width: 100%"
            >
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column
                        prop="createTime"
                        label="创建时间"
                        :formatter="(row) => formatDate(row.createTime)"
                  ></el-table-column
                  ><el-table-column prop="goodsName" label="商品"></el-table-column
                  ><el-table-column prop="goodsNum" label="数量"></el-table-column>
                  <el-table-column label="操作">
                        <template slot-scope="scope">
                              <el-button
                                    size="mini"
                                    type="info"
                                    icon="el-icon-view"
                                    circle
                                    @click.native="show(scope.row)"></el-button>
                              <el-button
                                    size="mini"
                                    type="danger"
                                    icon="el-icon-delete"
                                    circle
                                    @click.native="del(scope.row)"
                              ></el-button>
                        </template>
                  </el-table-column>
            </el-table>
            <el-col :span="24">
                  <div class="page-box">
                        <el-pagination @size-change="handleSizeChange" :small="true"
                              :hide-on-single-page="true"
                              @current-change="changePage"
                              background
                              layout="total, sizes, prev, pager, next"
                              :total="total"
                              :page-size="pageSize"
                        ></el-pagination>
                  </div>
            </el-col>
            <!-- 弹出层 -->
            <el-dialog :title="formTitle" :visible.sync="formVisible" top="5vh" width="30%" :before-close="handleClose">
                  <el-form>
                        <el-form-item label='收货地址：' :label-width='formLabelWidth'>
                                    <el-button type="primary" disabled size="mini" v-if="addr.length==0">请添加收货地址</el-button>
                                    <el-select v-else v-model="buy.addr" placeholder="请选择" size="mini">
                                          <el-option v-for="item in addr" :key="item.id" :label="item.addr+','+item.phone" :value="item"></el-option>
                                    </el-select>
                        </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                        <el-button size="mini" @click="formVisible = false">取 消</el-button>
                        <el-button size="mini" type="primary" @click="pay">确 定</el-button>
                  </div>
            </el-dialog>
            <!--接口返回的html代码渲染在页面上-->
            <div id="payDiv" v-html="payCont"></div>
      </div></template
>
<script>
export default {
      props: [],
      data() {
            return {
                  addr:[],//我的收货地址
                  loading: true,
                  page: 0,
                  pageSize: 10,
                  total: 0,
                  tableData: [],
                  formTitle: "",
                  formVisible: false,
                  inductsVisible: false,
                  form: {
                        id: "",
                        createTime: "",
                        updateTime: "",
                        creator: "",
                        goodsId: "",
                        goodsNum: "",
                  },
                  rules: {
                        id: [{ required: true, message: "请输入编号", trigger: "blur" }],
                        createTime: [
                              { required: true, message: "请输入创建时间", trigger: "blur" },
                        ],
                        updateTime: [
                              { required: true, message: "请输入更新时间", trigger: "blur" },
                        ],
                        creator: [{ required: true, message: "请输入创建人", trigger: "blur" }],
                        goodsId: [{ required: true, message: "请输入商品ID", trigger: "blur" }],
                        goodsNum: [{ required: true, message: "请输入商品数量", trigger: "blur" }],
                  },
                  formLabelWidth: "120px",
                  /** 弹出框标签宽度*/ isChange: false,
                  search: { id: "", creator: "", goodsId: "" },
                  multipleSelection: [],
                  pageUrlPath: "/client/shoppingCart",

                  //需要传到接口的必要参数
                  payForm: {
                        body: "",
                        outTradeNo: "",
                        subject: "",
                        totalAmount: "",
                  },
                  buy:{
                        addr:''
                  },
                  payCont: "",
            };
      },
      methods: {
            pay(){
                  this.$confirm("结算选中商品, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                  }).then(() => {
                        this.$root.loading = true;
                        this.getWidoutTradeNo();//订单号
                        let totalAmount=0;
                        let orderList=[];
                        let cartId=[]
                        this.multipleSelection.forEach((item) => {
                              totalAmount+=(item.goodsNum*item.goodsPrice);
                              orderList.push({
                                          orderId:this.payForm.outTradeNo,
                                          goodsId:item.goodsId,
                                          goodsNum:item.goodsNum
                                    })
                              cartId.push(item.id)
                        });
                        let payForm={
                              orderLists:orderList,
                              addr:this.buy.addr,
                              id:this.payForm.outTradeNo,
                              cartId:cartId
                        }

                        this.payForm.subject='购物车结算';
                        this.payForm.totalAmount=totalAmount;
                        this.payForm.body='购物车结算';
                        this.payForm.returnUrl=window.location.href
                        this.payForm.notifyUrl=window.location.href
                        console.log(this.payForm);
                        window.sessionStorage.setItem("payForm",JSON.stringify(payForm));
                        let format = new FormData();
                        Object.keys(this.payForm).map((key) => {
                              format.append(key, this.payForm[key]);
                        });
                        this.$axios({
                              method: "post",
                              url: this.$url + "/pay/aliPay",
                              data: format,
                        }).then((res) => {
                              this.payCont=res.data.data.content;
                              /**
                              * this.$nextTick稍微解释一下：this.payCont 进行赋值的时候是异步的
                              * (1)如果不加this.$nextTick：有可能出现this.payCont还没有渲染完毕，我这边就submit了，这个时候控制台就会报找不到这个submit
                              * （2）加this.$nextTick：就是确保我已经渲染完成了，你去获取这个class完成提交。
                              *
                              */
                              this.$nextTick(() => {
                                    //使用原生js去获取到渲染在页面上的from表单，我们手动的提交请求，转到支付页面
                                    let payId =
                                          document.getElementsByName(
                                                "punchout_form"
                                          )[0];
                                    //提交
                                    payId.submit();
                              });
                        });
                  });
            },
            submitOrder(){
                  let buyOrder=JSON.parse(window.sessionStorage.getItem('payForm'));
                  let formData=new FormData();
                  formData.append("id",this.$route.query.out_trade_no);
                  formData.append("state",1);
                  
                  formData.append("orderLists",JSON.stringify(buyOrder.orderLists));
                  formData.append("addr",buyOrder.addr.addr);
                  formData.append("mode","支付宝");
                  formData.append("phone",buyOrder.addr.phone);
                  formData.append("name",buyOrder.addr.name);
                  this.$axios({
                        url:this.$url+'/client/shoppingOrder/add',
                        method:'POST',
                        data:formData
                  });

                  // 删除购物车
                  let format = new FormData();
                  buyOrder.cartId.forEach((item) => {
                        format.append("ids", item);
                  });
                  this.$axios({
                        method: "DELETE",
                        data: format,
                        url: this.$url + this.pageUrlPath + "/del",

                  }).then((res) => {
                        if (res.data.status.code == 200) {
                              this.toPage();
                        }
                  });
                  
            },
            initAddr(){
                  this.$axios
                        .get(
                              this.$url +
                                    "/client/addr/list?page=0&pageSize=20"
                        )
                        .then((response) => {
                              this.addr = response.data.data.list;
                        });
            },
            //生成订单编号---根据日期生成
            getWidoutTradeNo() {
                  let vNow = new Date();
                  let sNow = "";
                  sNow += String(vNow.getFullYear());
                  sNow += String(vNow.getMonth() + 1);
                  sNow += String(vNow.getDate());
                  sNow += String(vNow.getHours());
                  sNow += String(vNow.getMinutes());
                  sNow += String(vNow.getSeconds());
                  sNow += String(vNow.getMilliseconds());
                  this.payForm.outTradeNo = sNow;
            },
            show(row){
                  this.$router.push({
                        path:'/admin/showGoods/'+row.goodsId
                  })
            },
            /**初始化字典 */ 
            initDist() {
                  this.initAddr();
            },
            /**格式化日期 */ formatDate(timeStamp) {
                  let date = new Date(timeStamp);
                  let month =
                        date.getMonth() + 1 < 10
                              ? "0" + (date.getMonth() + 1)
                              : date.getMonth() + 1;
                  let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                  let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                  let minutes =
                        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                  return date.getFullYear() + "-" + month + "-" + day + " " + hours + ":" + minutes;
            },
            handleSizeChange(size) {
                  this.pageSize = size;
                  this.toPage();
            },
            init() {
                  this.toPage();
                  this.initDist();
            },
            toPage() {
                  this.loading = true;
                  let param = "";
                  Object.keys(this.search).map((key) => {
                        if (this.search[key] != undefined && this.search[key] != "") {
                              param += "&" + key + "=" + this.search[key];
                        }
                  });
                  this.$axios
                        .get(
                              this.$url +
                                    this.pageUrlPath +
                                    "/list?page=" +
                                    this.page +
                                    "&pageSize=" +
                                    this.pageSize +
                                    param
                        )
                        .then((response) => {
                              this.tableData = response.data.data.list;
                              this.total = response.data.data.total;
                              this.loading = false;
                        });
            },
            /**监听页码发生变化 */ changePage(e) {
                  this.page = e - 1;
                  this.toPage();
            },
            add() {
                  if(this.multipleSelection.length==0){
                        return;
                  }
                  this.formTitle = "结算";
                  this.formVisible = true;
            },
            handleClose(done) {
                  this.$confirm("确认关闭？").then(() => {
                        done();
                  });
            },
            submit() {
                  this.$root.loading = true;
                  let formData = new FormData();
                  Object.keys(this.form).map((key) => {
                        if (this.form[key] != undefined && this.form[key] != "") {
                              formData.append(key, this.form[key]);
                        }
                  });
                  this.$axios({
                        method: "POST",
                        url: this.$url + this.pageUrlPath + "/add",
                        data: formData,
                  }).then((res) => {
                        if (res.data.status.code < 400) {
                              this.toPage();
                              this.formVisible = false;
                        }
                  });
            },
            edit(row) {
                  this.form = row;
                  this.formTitle = "编辑";
                  this.formVisible = true;
            },
            /*删除*/ del(row) {
                  this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                  }).then(() => {
                        this.$root.loading = true;
                        let format = new FormData();
                        format.append("ids", row.id);
                        this.$axios({
                              method: "DELETE",
                              data: format,
                              url: this.$url + this.pageUrlPath + "/del",
                        }).then((res) => {
                              if (res.data.status.code == 200) {
                                    this.toPage();
                              }
                        });
                  });
            },
            /**下载表 */ templateDownload() {
                  window.open(this.$url + this.pageUrlPath + "/template");
            },
            /**批量删除 */ delList() {
                  this.$confirm("此操作将永久删除信息, 是否继续?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                  }).then(() => {
                        this.$root.loading = true;
                        let format = new FormData();
                        this.multipleSelection.forEach((item) => {
                              format.append("ids", item.id);
                        });
                        this.$axios({
                              method: "DELETE",
                              data: format,
                              url: this.$url + this.pageUrlPath + "/del",
                        }).then((res) => {
                              if (res.data.status.code == 200) {
                                    this.toPage();
                              }
                        });
                  });
            },
            /**选择框 val为当前所有选择的内容数组 */ handleSelectionChange(val) {
                  this.multipleSelection = val;
            },
            /**点击批量导入 */ inducts() {
                  this.inductsVisible = true;
            },
            /**选择批量 */ inductsChange() {
                  let files = this.$refs.inducts.files;
                  /*获取选择的文件*/ let len = files.length;
                  /*文件个数*/ if (len != 1) {
                        this.$message({ message: "需要且只能上传一个文件", type: "warning" });
                        return;
                  }
                  let formData = new FormData();
                  formData.append("file", files[0]);
                  this.$axios({
                        method: "post",
                        url: this.$url + this.pageUrlPath + "/inducts",
                        data: formData,
                        headers: { "Content-Type": "multipart/form-data" },
                  })
                        .then((res) => {
                              /*上传成功后是否需要将选择的文件滞空*/ this.$refs.inducts.value = null;
                              if (res.data.status.code == 200) {
                                    this.inductsVisible = false;
                                    this.toPage();
                              }
                        })
                        .catch(() => {
                              this.$refs.inducts.value = null;
                              this.$message({
                                    message: "上传失败，请检查文件合法性！",
                                    type: "error",
                              });
                        });
            },

      },
      mounted() {
            this.$root.loading=true;
            if(this.$route.query.out_trade_no){
                  this.submitOrder();
            }else{
                  this.init();
            }
      },
};
</script>
<style lang="less" scoped></style>
